<template>
  <div class="home">
  
     <!-- 列表详情的介绍页面 -->
     <router-view /> 

    <!-- 头部搜索输入框 -->
      <div class="header">
          <div class="log-img"><img src="../assets/img/header-logo.png" alt=""></div>
          <div class="search">
            <van-search  placeholder="请输入搜索关键词" class="inputs" v-model="searchText" @input="getSearch"/>
          </div>  
          <div class="button" @click="popupShow = true">三</div>
    </div>
        <!-- 顶部弹出层 -->
        <van-popup
           v-model="popupShow"
           position="top"
           :style="{ height: '50%' }"
        >
        <van-cell title="切换频道" is-link @click=" popupShow= false"/>
          <div class="channel">
             <span  @click="$router.push('/')">趣味生活</span>
             <span  @click="$router.push('/digit')">数码极客</span>
             <span @click="$router.push('/delicious')">舌尖美味</span>
             <span @click="$router.push('/study')">我爱学习</span>
             <span>到此一游</span>
             <span>玩车行家</span>
             <span>天生丽质</span>
             <span>生财有道</span>
             <span>百科达人</span>
          </div>
          
        </van-popup> 
     <!-- 展示搜索内容 -->
        <div class="search-text" v-show="searchText">
            <p v-for="(i,index) in searchDate" :key="index"> {{i.q}}</p>     
        </div>


<!-- 导航部分 -->
<div class="tab-nav">
<van-tabs v-model="active" :animated="true" color="#ff5f33">
  <van-tab title="趣味生活" name="a" to="/"></van-tab>
  <van-tab title="数码极客" name="b" to="/digit" ></van-tab>
  <van-tab title="舌尖美味" name="c" to="/delicious"></van-tab>
  <van-tab title="我爱学习"  name="w" to="/study"> 我爱学习</van-tab>
  <van-tab title="我爱学习"  name="w" to="/study"> 我爱学习</van-tab>
  <van-tab title="我爱学习"  name="w" to="/study"> 我爱学习</van-tab>
  <van-tab title="用户"    name="d" to="/user">用户</van-tab>
 

</van-tabs>
</div>


<!-- 轮播图  -->
 <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#ff5f33" v-show="active=='a'">
 
  <van-swipe-item><img src="../assets/img/1.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/2.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/3.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/4.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/5.jpg" alt=""></van-swipe-item>
</van-swipe>
 
     

<!-- 列表部分 -->
<div class="left-list" v-for="(i,index) in homeDate" :key="index" @click="next(index)">

              <div class="list-img"><img :src="i.titlepic" alt=""></div>
              <div class="list-text">
                  <h2>{{i.title}}</h2>
                  <p class="text-dec">{{i.smalltext}}</p>
                  <p class="text-time">
                    <span> <i class="time-log"><img src="../assets/img/time.svg" alt=""></i>{{i.newstime}}</span>
                    <span> <i class="see-log"><img src="../assets/img/see.svg" alt=""></i>{{i.onclick}}</span>
                  </p>
              </div>
       </div>

         <!-- 底部加载更多 -->
        <div class="more" @click="getMore" v-show="more">加载更多</div>
        <van-loading size="30px" v-show="show" vertical>加载中...</van-loading>
  


 
 <!-- 点击加载后的页面 -->
 <div class="left-list" v-for="(i,index) in home2Date" :key="index+27" v-show="show2">

<div class="list-img"><img :src="i.titlepic" alt=""></div>
<div class="list-text">
    <h2>{{i.title}}</h2>
    <p class="text-dec">{{i.smalltext}}</p>
    <p class="text-time">
      <span> <i class="time-log"><img src="../assets/img/time.svg" alt=""></i>{{i.newstime}}</span>
      <span> <i class="see-log"><img src="../assets/img/see.svg" alt=""></i>{{i.onclick}}</span>
    </p>
</div>
</div>



  </div>
</template>

  <script>

import { Toast } from 'vant';
        export default {
          
           data() {
            return {
              active: 'a',
              homeDate: [],
              index: 0,
              show: false,
              home2Date:[],
              show2:false,
              more: true,
              searchText:'',
              searchDate:[],
              // 顶部弹出层
              popupShow:false,


             
            }
           },

            mounted(){
            
              switch (this.$route.path) { 
                 case '/':
                    this.active = 'a'
                  break
                  case '/digit':
                     this.active = 'b'
                    break
                   case '/delicious':
                      this.active ='c'
                    break
                   default:
                      this.active = 'a'
                   break
                 
                }

                
           
            },

         
           created() {
               this.getDate()
               this.getSearch()
        },
     
      methods: {
       async  getDate() {
           
            // 本地请求数据用绝对路径,json文件要放在public文件夹中
            let data = await this.$axios.get('/data/home1.json')
            this.homeDate = data.data
            
           },
  
           next(index) {
          
            this.$router.push(`/homedec/${index}`)
           },

          async  getMore() {
             this.show = true
                let data  = await this.$axios.get('/data/home2.json')
             console.log(data);
             this.home2Date = data.data
           
              this.more = false

                setTimeout(()=>{
                  this.show2 = true
                  this.show = false
                  Toast('加载成功');
                  
                },2000)
             },

           async  getSearch() {
            // 'https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&from=pc_web&wd=薛之谦'
                let data =  await this.$jsonp(`https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&from=pc_web&wd=${this.searchText}`,{
                   dataType: 'jsonp',
                   jsonp: 'cb'          //一定要加这两个参数
                                       //一定要加这两个参数,要不然会报错 导致代码阻塞
                 })

                  this.searchDate = data.g
                
                
              }
        }

      }

       
  </script>


<style lang="scss" scoped>
.home {
     position: relative;
     width: 100vw;
     background: #eee;
    
    
 


   .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100vw;
      height: 60px;
      position: sticky; 
      top:0;
      left: 0;
      right: 0;
      padding: 10px;
      z-index: 10;
      background: white;

      .button {
            flex: 0 0 60px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;

           
          
      }
     

      .log-img {
         width: 120px;
         height: 40px;
       

          & img {
            width: 100%;
            height: 100%;
            display: block;
          }
      }

      .search{


        .inputs {
          padding: 0px;
          border-radius: 10px;
          overflow: hidden;
         
        }
      
        
      }
    

   }


       .tab-nav {
      position: sticky; 
       top:60px;
       left: 0;
       right: 0;
       z-index: 10;
      }

      .my-swipe {
          width: 100vw;
          height: 180px;
          margin-top: 5px;
        

      .van-swipe-item {
          

            & img {
              width: 100%;
              display: block;
            }
          }
    


     }
   
     .left-list {
               display: flex;
               margin-top: 5px;
               background: white;    
               border: 5px solid #eee;
              
  
               .list-img {
                    flex: 0 0 30vw;
                    width: 30vw;
                    height: 75px;
                    margin-right: 10px;
  
                  & img {
                     width: 100%;
                     height: 100%;
                    //  display: block;
                  }
  
               }
  
               .list-text {
                 flex: 0 0 60vw;
                 width: 60vw;
                 padding: 5px;
  
                  
  
                 .text-dec {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    font-size: 13px;
                    color: #aab2bd;
                    
  
  
                 }
  
                 .text-time {
                   font-size: 12px;
                    color: #aab2bd;
  
                       
                      span {
                        margin-right: 5px;
                      }
                    .time-log,
                    .see-log {
                       display: inline-flex;
                       width: 15px;
                       height: 15px;
                       margin-right: 5px;
  
                        & img {
                          width: 100%;
                          height: 100%;
                        }
                    }
  
                 }
               }
            }

       .more {
          width: 100%;
          height: 50px;
          line-height: 40px;
          text-align: center;
          background: rgb(183, 182, 182);
          border: 5px solid #eee;
          border-radius: 10px;
       }

       .search-text {
         position:absolute;
         width: 100%;
         height: 230px;
         line-height: 20px;
         text-align: center;
         z-index: 999;
         background: white;

         & p {
          margin-top: 2px;
         }
       }
       
       .channel {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          padding: 10px;


          span {
             
             width: 25vw;
             height: 30px;
             text-align: center;
             line-height: 30px;
             margin-bottom: 8px;
             margin-right: 5px;
             background: #f5f5f5;
             border-radius: 5px;
             font-size: 12px;
          }
       }

}


</style>
